﻿@{
    ViewBag.Title = "Product Setup";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<link href="~/Content/css/product.css" rel="stylesheet" />

<div>
    <!-- Button trigger modal -->


    <!-- Modal -->
    <div class="modal fade" id="basicExampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" data-backdrop="false"
        aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content" style="width: 900px; height: 610px;" id="newproductmodel">
                <div class="modal-header" style="background-color: crimson">
                    <h5 class="modal-title" id="exampleModalLabel">Add Product</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body" id="modelbody">
                </div>
            </div>
        </div>
    </div>
</div>
<div class="first">
    <div class="second" style="margin-left:20.2em; ">
        <table id="marbleTable" class="table">
            <thead>
                <th class="headerCol">ID</th>
                <th class="headerCol" style="left:55px">Edit</th>
                <th class="headerCol" style="left:100px">Name</th>
                <th>Type</th>
                <th>Category</th>
                <th>POSCounter</th>
                <th>Active</th>
                <th>DisplayInPOS</th>
                <th>DisplayGroup</th>
                <th>AutoGenerateCardNumber</th>
                <th>OnlyVIP</th>
                <th>Price</th>
                <th>FaceValue</th>
                <th>TaxInclusive</th>
                <th>FinalPrice</th>
                <th>EffectivePrice</th>
                <th>LastUpdatedBy</th>
                <th>LastUpdatedDate</th>
            </thead>
            @foreach (var item in ViewBag.productDetails)
            {  
                <tr onchange="UpdatedList(this)">
                    <td class="headerCol">@item.Id  </td>
                    <td class="headerCol" style="left:55px">
                        <button onClick="EditProduct(@item.Id)">-</button>
                    </td>
                    <td class="headerCol" style="left:100px">
                        <input type="text" value="@item.Name" class="gridText" />
                    </td>
                    <td>
                        <select name="TypeList" id="TypeList" class="gridText">
                            @foreach (var dow in item.TypeList)
                            {
                                if (@item.Type == @dow.Value)
                                {
                                <option value="@dow.Value" selected>@dow.Value</option>
                                }
                                else
                                {
                                <option value="@dow.Value">@dow.Value</option>
                                }
                            }
                        </select>
                    </td>
                    <td>
                        <select name="categoryList" id="categoryList" class="gridText">
                            @foreach (var dow in item.CategoryList)
                            {
                                if (@item.Category == @dow.Value)
                                {
                                <option value="@dow.Value" selected>@dow.Value</option>
                                }
                                else
                                {
                                <option value="@dow.Value">@dow.Value</option>
                                }
                            }
                        </select>
                    </td>
                    <td>
                        <input type="text" value="@item.POSCounter" class="gridText" />
                    </td>
                    <td>
                        <input type="checkbox"  @(item.Active ? "checked='checked'" : "") value="@item.Active" />
                    </td>
                    <td>
                        <input type="checkbox"  @(item.DisplayInPOS ? "checked='checked'" : "") value="@item.DisplayInPOS" />
                    </td>
                    <td>
                        <input type="text" value="@item.DisplayGroup" class="gridText" />
                    </td>
                    <td>
                        <input type="checkbox"  @(item.AutoGenerateCardNumber ? "checked='checked'" : "") value="@item.AutoGenerateCardNumber"/>
                    </td>
                    <td>
                        <input type="checkbox" @(item.OnlyVIP ? "checked='checked'" : "") value="@item.OnlyVIP" />
                    </td>
                    <td>
                        <input type="text" value="@item.Price" class="gridText"/>
                    </td>
                    <td>
                        <input type="text" value="@item.FaceValue" class="gridText"/>
                    </td>
                    <td>
                        <input type="checkbox" @(item.TaxInclusive ? "checked='checked'" : "") value="@item.TaxInclusive" />
                    </td>
                    <td>
                        <input type="text" value="@item.FinalPrice" class="gridText"/>
                    </td>
                    <td>
                        <input type="text" value="@item.EffectivePrice" class="gridText"/>
                    </td>
                    <td>
                        <input type="text" value="@item.LastUpdatedBy" class="gridText" disabled/>
                    </td>
                    <td>
                        <input type="text" value="@item.LastUpdatedDate" class="gridText" disabled/>
                    </td>
                </tr>  
            }
        </table>
    </div>
</div>
<div class="action">
    <button class="btn btn-primary btn-md" role="button" onclick="SaveProducts()">Save</button>
    <a href="#" class="btn btn-primary btn-md" role="button" onclick="AddProduct()">Add Product</a>
    <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#basicExampleModal" onclick="targetmodel()">
        New
    </button>
    <a href="/Product/ClosePopUp" class="btn btn-primary">Close</a>
</div>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script>
    $(document).ready(function () {
        $('.dropdown-toggle').collapse({
            toggle: false
        });
    })
    $("#newproductmodel").draggable({
        handle: ".modal-header"
    });
    function targetmodel() {
        $('#modelbody').load('/Product/Edit');
    }
    function AddProduct() {
        var typeListOptions = '';
              @foreach (var dow in ViewBag.productDetails[0].TypeList)
              {
                 @: typeListOptions = typeListOptions + '<option value="">@dow.Value</option>';
              }
        typeListOptions = typeListOptions + '</select></td>';
        var categoryListOptions = '';
              @foreach (var dow in ViewBag.productDetails[0].CategoryList)
              {
                   @: categoryListOptions = categoryListOptions + '<option value="" >@dow.Value</option>';
              }
        categoryListOptions = categoryListOptions + ' </select> </td>';

        var newRow = '<tr onchange=UpdatedList(this)> <td class="headerCol"> <a href="#"></a> </td>  <td class="headerCol" style="left:55px">  </td>' +
        '<td class="headerCol" style="left:100px"> <input type="text" value="" class="gridText"/>  </td>' +
        '<td> <select name="TypeList" id="TypeList">' + typeListOptions +
        '<td> <select name="categoryList" id="categoryList">' + categoryListOptions +
        '<td> <input type="text" value="" class="gridText" />  </td>' +
        '<td> <input type="checkbox" />  </td>' +
        '<td> <input type="checkbox" />  </td>' +
        '<td> <input type="text" value="" class="gridText" />  </td>' +
        '<td> <input type="checkbox" />  </td>' +
        '<td> <input type="checkbox" />  </td>' +
        '<td> <input type="text" value="" class="gridText"/>  </td>' +
        '<td> <input type="text" value="" class="gridText"/>  </td>' +
        '<td> <input type="checkbox" />  </td>' +
        '<td> <input type="text" value="" class="gridText"/>  </td>' +
        '<td> <input type="text" value="" class="gridText"/>  </td>' +
        '<td> <input type="text" value="" class="gridText" disabled/>  </td>' +
        '<td> <input type="text" value="" class="gridText" disabled/>  </td>' + '</tr>';
        $('#marbleTable tr:last').after(newRow);
    }
    function SaveProducts() {
        var products = [];
        var table = document.getElementById('marbleTable');
        for (var r = 1, n = table.rows.length; r < n; r++) {
            if (updatedArray.includes(r)) {
                products.push({
                    Id: table.rows[r].cells[0].innerHTML,
                    Name: table.rows[r].cells[2].children[0].value,
                    Type: table.rows[r].cells[3].children[0].value,
                    Category: table.rows[r].cells[4].children[0].value,
                    POSCounter: table.rows[r].cells[5].children[0].value,
                    Active: table.rows[r].cells[6].children[0].checked,
                    DisplayInPOS: table.rows[r].cells[7].children[0].checked,
                    DisplayGroup: table.rows[r].cells[8].children[0].value,
                    AutoGenerateCardNumber: table.rows[r].cells[9].children[0].checked,
                    OnlyVIP: table.rows[r].cells[10].children[0].checked,
                    TaxInclusive: table.rows[r].cells[11].children[0].checked,
                    Price: table.rows[r].cells[12].children[0].value,
                    FaceValue: table.rows[r].cells[13].children[0].value,
                    FinalPrice: table.rows[r].cells[14].children[0].value,
                    EffectivePrice: table.rows[r].cells[15].children[0].value,
                });
            }
        }
        $.ajax({
            type: "POST",
            contentType: "application/json; charset=utf-8",
            url: '@Url.Action("UpdateProducts", "Product")',
            data: JSON.stringify({ products: products }),
            dataType: "json",
            success: function (data) {
                alert('Data Saved');
                location.reload();
            },
            error: function (e) {
                alert(e);
            }
        });
    }
    var updatedArray = [];
    function UpdatedList(x) {
        if (!updatedArray.includes(x.rowIndex)) {
            updatedArray.push(x.rowIndex);
        }
    }
    function EditProduct(id) {
        $('#basicExampleModal').modal('show');
        $('#modelbody').load('/Product/Edit', { "id": id });
        //window.open("/product/Edit/"+id, "Marbale", "width=700,height=700");
    }
</script>
